<template>
	<div>
		<div class="search">
			<el-input size="mini" placeholder="请输入搜索内容" v-model="searchContent">
				<el-button
					size="mini"
					slot="suffix"
					@click="handleSearch"
					icon="el-icon-search"
					type="text">
				</el-button>
			</el-input>
		</div>
		<el-table :data="tableData" size="mini" border>
			<el-table-column
				v-for="item in handleColumns()"
				:prop="item.prop"
				:label="item.label"
				:show-overflow-tooltip="true"
				:sortable="item.sortable"
				:min-width="item.width"
				:key="item.prop">
				<template slot-scope="scope">
					{{scope.row[item.prop] || "--"}}
				</template>
			</el-table-column>
			<el-table-column prop="action" label="操作" width="100">
				<template slot-scope="scope">
					<div>
						<el-button
							size="mini"
							type="text"
							@click="handleDetail(scope)">
							查看
						</el-button>
						<el-button
							size="mini"
							type="text"
							@click="handleStatistics(scope)">
							统计
						</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSize"
			@current-change="handleCurrent"
			:current-page="current"
			:page-sizes="page.pageSizes"
			:page-size="pageSize"
			background
			layout="total, prev, pager, next, sizes, jumper"
			:total="total">
		</el-pagination>
		<el-drawer
			class="flex-el-drawer"
			size="60%"
			direction="rtl"
			:with-header="false"
			:visible.sync="detailDrawer.visible">
			<div class="el-drawer__header">
				<div>
					<span>{{detailDrawer.title}}</span>
				</div>
				<button class="el-drawer__close-btn" @click="handleDetailClose">
					<el-icon class="el-icon-close"></el-icon>
				</button>
			</div>
			<div class="el-drawer-content">
				<bury-detail-dialog :trackDbId="detailTrackId"></bury-detail-dialog>
			</div>
			<div class="el-drawer-footer">
				<el-button size="mini" type="primary" @click="handleDetailClose">关闭</el-button>
			</div>
		</el-drawer>
		<el-drawer
			class="flex-el-drawer"
			size="60%"
			direction="rtl"
			:with-header="false"
			:visible.sync="statisticsDrawer.visible">
			<div class="el-drawer__header">
				<div>
					<span>{{statisticsDrawer.title}}</span>
				</div>
				<button class="el-drawer__close-btn" @click="handleStatisticsClose">
					<el-icon class="el-icon-close"></el-icon>
				</button>
			</div>
			<div class="el-drawer-content">
				<event-statistic :trackId="statisticsId"></event-statistic>
			</div>
			<div class="el-drawer-footer">
				<el-button size="mini" type="primary" @click="handleStatisticsClose">关闭</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import buryDetailDialog from "./buryDetailDialog";
	import eventStatistic from "./eventStatistic";

	export default {
		name: "buryTable",
		data() {
			return {
				searchContent: "",
				current: 1,
				pageSize: 10,
				total: 0,
				columns: [
					{
						prop: "trackName",
						label: "埋点名称",
						width: 150,
						tooltip: true,
						sortable: false
					},
					{
						prop: "trackId",
						label: "埋点标识",
						width: 80,
						tooltip: true,
						sortable: false
					},
					{
						prop: "eventId",
						label: "事件类型",
						width: 80,
						tooltip: true,
						sortable: false
					},
					{
						prop: "version",
						label: "最近更新版本",
						width: 100,
						tooltip: true,
						sortable: false
					},
					{
						prop: "updateStatus",
						label: "最近更新状态",
						width: 100,
						tooltip: true,
						sortable: false
					},
					{
						prop: "eventStatus",
						label: "采集状态",
						width: 80,
						tooltip: true,
						sortable: false
					},
					{
						prop: "hitCount",
						label: "事件点击量",
						width: 90,
						tooltip: true,
						sortable: false
					},
					{
						prop: "userCount",
						label: "事件用户量",
						width: 90,
						tooltip: true,
						sortable: false
					},
				],
				tableData: [],
				detailDrawer: {
					visible: false,
					title: "查看埋点"
				},
				detailTrackId: null,
				statisticsId: null,
				statisticsDrawer: {
					visible: false,
					title: "事件访问量统计"
				},
			}
		},
		props: {
			eventInfo: {
				type: Object
			}
		},
		components: {
			buryDetailDialog,
			eventStatistic
		},
		watch: {
			eventInfo: {
				handler() {
					this.handleSearch();
				},
				deep: true,
				immediate: true
			}
		},
		mounted() {
		},
		methods: {
			handleColumns() {
				let columns = this.columns.concat([]);
				if (!this.id) {
					let obj = {
						prop: "pageId",
						label: "位置Id",
						width: 80,
						tooltip: true,
						sortable: false
					};
					columns.splice(2, 0, obj);
				}
				return columns;
			},
			// 查询表格数据
			handleSearch() {
				this.current = 1;
				this.handleQueryData();
			},
			// 接口：查询数据
			async handleQueryData() {
				let data = {
					...this.eventInfo,
					currentPage: this.current || this.page.current,
					pageSize: this.pageSize || this.page.pageSize,
				};
				let res = await this.$eventApi.eventList(data);
				if (res) {
					let {list, total} = res.value;
					this.tableData = list;
					this.total = total;
				}
				return data;
			},
			handleSize(size) {
				this.current = size;
				this.handleQueryData();
			},
			handleCurrent(page) {
				this.current = 1;
				this.pageSize = page;
				this.handleQueryData();
			},
			// 查看
			handleDetail(scope) {
				this.detailDrawer.visible = true;
				let {id} = scope.row;
				this.detailTrackId = id;
			},
			// 关闭：埋点详情
			handleDetailClose() {
				this.detailDrawer.visible = false;
			},
			// 统计
			handleStatistics(scope) {
				this.statisticsDrawer.visible = true;
				let {trackId} = scope.row;
				this.statisticsId = trackId;
			},
			// 关闭：
			handleStatisticsClose() {
				this.statisticsDrawer.visible = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.search {
		width: 300px;
	}
</style>
